<template>
  <div id="space-issues">
    <div class="main-container container-fluid page-holder">
      <issues-breadcrumb />
      <el-menu mode="horizontal" class="issues deep-color a-link-item" :default-active="activeItem">
        <el-menu-item :index="$rp.ISSUES_ALL">
          <router-link :to="initRouterLinkTo($rp.ISSUES_ALL)">全部</router-link>
        </el-menu-item>
        <el-menu-item :index="$rp.ESSENCE">
          <router-link :to="initRouterLinkTo($rp.ESSENCE)">精华</router-link>
        </el-menu-item>
        <el-menu-item :index="$rp.ISSUES_COLLECTED">
          <router-link :to="initRouterLinkTo($rp.ISSUES_COLLECTED)">收藏</router-link>
        </el-menu-item>
        <div class="controls-container">
          <router-link class="controls-child"
                       :to="`/${$rp.SPACES}/${spaceId}/${$rp.SPACE_ISSUES}/${$rp.CREATE}`">
            <el-button type="primary">创建问题</el-button>
          </router-link>
        </div>
      </el-menu>
      <div class="easy-container-min flex issues">
        <el-input v-model="searchInput" placeholder="请输入关键字后按回车键进行搜索"
                  @keyup.enter.native="doSearch"/>
        <SortSeparate
          class="m-l-10"
          :list-type="$C.sort.issuesSortSeparate"
          :default-sort="$C.sort.issuesSortDefault"
        />
      </div>
      <IssuesList :issues="issues" :is-loading="isLoading"/>
      <pagination :current-page="pagination.currentPage" :page-count="pagination.pageCount"/>
    </div>
  </div>
</template>

<script>
import IssuesBreadcrumb from '@/views/issues/components/breadcrumb';
import SortSeparate from '@/components/shared/SortSeparate';
import IssuesList from './IssuesList';
import * as format from './format';

export default {
  name: 'SpaceIssues', // 空间讨论区
  components: { IssuesBreadcrumb, SortSeparate, IssuesList },
  data() {
    return {
      issues: [], // 问题列表
      isLoading: false, // 正在加载问题列表
      pagination: { // 翻页组件
        currentPage: null, // 当前页
        pageCount: null, // 总页数
      },
      searchInput: '', // 搜索的问题标题
    };
  },
  computed: {
    // 空间id
    spaceId() { return this.$route.params.spaceId; },
    // 当前激活的问题列表类型
    activeItem: {
      get() { return this.$route.query.type || this.$rp.ISSUES_ALL; },
      set(val) { return val; },
    },
    // 获取问题列表所需参数
    initLoadParams() {
      const sort = this.$route.query.sort || this.$C.sort.issuesSortDefault;
      return {
        spaceId: this.spaceId,
        type: this.activeItem,
        page: this.$route.query.page || 1, // 加载页数
        sort: this.$C.sort.sortType[sort.split('_')[0]], // 排序类型（更新、点赞）
        order: sort.split('_')[1], // 排序方式（倒序、正序）
      };
    },
  },
  methods: {
    // 加载问题列表
    loadIssues() {
      this.isLoading = true;
      this.$api.spaceIssues.index(this.initLoadParams)
        .then(res => this.handleRes(res))
        .catch(() => {})
        .then(() => { this.isLoading = false; });
    },
    // 处理加载结果
    handleRes(res) {
      this.issues = format.formatIssuesList(res.data);
      this.pagination.currentPage = res.kaminari.current_page;
      this.pagination.pageCount = res.kaminari.total_pages;
    },
    // 切换类型后不改变排序，并且移除翻页信息，需要为router-link生成to
    initRouterLinkTo(type) {
      const query = JSON.parse(JSON.stringify(this.$route.query));
      const realPath = `/${this.$rp.SPACES}/${this.spaceId}/${this.$rp.SPACE_ISSUES}`;
      return { path: realPath, query: Object.assign(query, { type, page: undefined }) };
    },
    // 走咱们去搜索问题
    doSearch() {
      const validTitle = this.searchInput.trim();
      this.searchInput = validTitle;

      const searchPath = `/${this.$rp.SPACES}/${this.spaceId}/${this.$rp.SPACE_ISSUES_SEARCH}`;
      this.$router.push({ path: searchPath, query: { title: validTitle } });
    },
  },
  created() {
    this.loadIssues();
  },
  watch: {
    // 监听加载问题列表参数，发生改变时重新加载列表
    initLoadParams() { this.loadIssues(); },
  },
};
</script>

<style></style>
